<template>
  <el-card style="width: 100%; height: 100vh" class="hidden-scrollbar">
    <template #header>
      <div class="card-header">
        <el-button type="primary">商品订单</el-button>
        <el-button>预约记录</el-button>
      </div>
    </template>
    <div class="card-content">
      <el-card style="width: 100%; height: auto" class="hidden-scrollbar">
        <div style="margin-top: 10px">
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <!-- 左侧：时间选择 -->
            <el-form :model="searchForm" class="search-form" style="flex: 1">
              <el-select
                v-model="searchForm.timeType"
                placeholder="下单时间"
                style="width: 110px"
              >
                <el-option label="下单时间" value="orderTime" />
                <el-option label="发货时间" value="deliveryTime" />
              </el-select>
              <el-date-picker
                style="width: 220px"
                v-model="searchForm.dateRange"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD"
              />
            </el-form>

            <!-- 中间：导出按钮 -->
            <el-button style="margin: 0 20px">导出明细</el-button>

            <!-- 右侧：搜索条件 -->
            <el-form
              :model="searchForm"
              class="search-form"
              style="justify-content: flex-end; flex: 1"
            >
              <el-select
                v-model="searchForm.orderType"
                placeholder="全部订单类型"
                style="width: 120px"
              >
                <el-option label="全部" value="" />
                <el-option label="普通" value="普通" />
                <el-option label="砍价" value="砍价" />
                <el-option label="直播" value="直播" />
                <el-option label="拼团" value="拼团" />
                <el-option label="全名营销" value="全名营销" />
              </el-select>
              <el-select
                v-model="searchForm.orderStatus"
                placeholder="全部订单状态"
                style="width: 130px"
              >
                <el-option label="全部" value="" />
                <el-option label="未支付" value="未支付" />
                <el-option label="已完成" value="已完成" />
                <el-option label="待发货" value="待发货" />
                <el-option label="已发货" value="已发货" />
                <el-option label="已关闭" value="已关闭" />
              </el-select>
              <el-input
                v-model="searchForm.keyword"
                style="width: 240px"
                placeholder="商品/顾客/状态"
                clearable
              />
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form>
          </div>
        </div>
      </el-card>

      <el-card
        style="width: 100%; height: 60vh; margin-top: 10px"
        class="hidden-scrollbar"
      >
        <el-table :data="filteredData" stripe style="width: 100%">
          <el-table-column prop="roomNum" label="商品信息" />
          <el-table-column prop="roomTypeName" label="总价" />
          <el-table-column prop="orderSource" label="数量" />
          <el-table-column
            prop="reservationName"
            label="实际收款"
            width="120"
          />
          <el-table-column prop="checkInTime" label="顾客" />
          <el-table-column prop="checkOutTime" label="订单状态" />
          <el-table-column label="操作" width="100">
            <template #default>
              <el-link type="primary" size="small">详情</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </el-card>
</template>

<script setup>
import { ref, reactive, computed } from "vue";

// 生成假数据
const generateMockData = () => [
  {
    roomNum: "商品A（普通）",
    roomTypeName: "￥150.00",
    orderSource: "1",
    reservationName: "￥150.00",
    checkInTime: "张三",
    checkOutTime: "已完成",
    orderType: "普通",
    orderTime: "2024-03-01",
    deliveryTime: "2024-03-02",
  },
  {
    roomNum: "商品B（砍价）",
    roomTypeName: "￥200.00",
    orderSource: "2",
    reservationName: "￥180.00",
    checkInTime: "李四",
    checkOutTime: "已发货",
    orderType: "砍价",
    orderTime: "2024-03-03",
    deliveryTime: "2024-03-05",
  },
  {
    roomNum: "直播商品C",
    roomTypeName: "￥300.00",
    orderSource: "1",
    reservationName: "￥270.00",
    checkInTime: "王五",
    checkOutTime: "待发货",
    orderType: "直播",
    orderTime: "2024-03-05",
    deliveryTime: "",
  },
  {
    roomNum: "拼团商品D",
    roomTypeName: "￥250.00",
    orderSource: "3",
    reservationName: "￥200.00",
    checkInTime: "赵六",
    checkOutTime: "未支付",
    orderType: "拼团",
    orderTime: "2024-03-07",
    deliveryTime: "",
  },
  {
    roomNum: "全名营销商品E",
    roomTypeName: "￥180.00",
    orderSource: "2",
    reservationName: "￥150.00",
    checkInTime: "孙七",
    checkOutTime: "已关闭",
    orderType: "全名营销",
    orderTime: "2024-03-09",
    deliveryTime: "",
  },
];

// 响应式数据
const originalData = ref(generateMockData());
const searchForm = reactive({
  timeType: "orderTime",
  dateRange: [],
  orderType: "",
  orderStatus: "",
  keyword: "",
});

// 计算属性处理过滤逻辑
const filteredData = computed(() => {
  return originalData.value.filter((item) => {
    // 时间范围过滤
    const timeValid =
      searchForm.dateRange.length !== 2 ||
      (item[searchForm.timeType] >= searchForm.dateRange[0] &&
        item[searchForm.timeType] <= searchForm.dateRange[1]);

    // 订单类型过滤
    const typeValid =
      !searchForm.orderType || item.orderType === searchForm.orderType;

    // 订单状态过滤
    const statusValid =
      !searchForm.orderStatus || item.checkOutTime === searchForm.orderStatus;

    // 关键字搜索
    const keyword = searchForm.keyword.toLowerCase();
    const keywordValid =
      !keyword ||
      item.roomNum.toLowerCase().includes(keyword) ||
      item.checkInTime.toLowerCase().includes(keyword) ||
      item.checkOutTime.toLowerCase().includes(keyword);

    return timeValid && typeValid && statusValid && keywordValid;
  });
});

// 搜索操作
const handleSearch = () => {
  // 计算属性自动更新，无需额外操作
};

// 重置操作
const handleReset = () => {
  searchForm.timeType = "orderTime";
  searchForm.dateRange = [];
  searchForm.orderType = "";
  searchForm.orderStatus = "";
  searchForm.keyword = "";
};
</script>

<style scoped>
.hidden-scrollbar {
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: flex-start;
}

.card-content {
  height: calc(100vh - 150px);
  overflow-y: auto;
}

.search-form {
  display: flex;
  gap: 10px;
  align-items: center;
}

.el-card {
  margin-bottom: 10px;
}
</style>